<template>
    <div class="topbar">
        <div class="inner">
            <div class="left">
                WFF
            </div>
            <div class="right">
                <div class="right-item" @click="navigateTo('/')">首页</div>
                <div class="right-item" @click="navigateTo('/resume')">我的简历</div>
                <div class="right-item" @click="openMyResume">下载简历</div>
                <div class="right-item" @click="navigateTo('/about')">关于</div>
            </div>
            <div class="menu-icon" @click="foldMenu"></div>
        </div>
        <div class="menu-wrap wow fadeInDown" data-wow-duration="0.2s" v-show="showMenu" ref="menu">
            <div class="menu-item" @click="navigateTo('/', 1)">首页</div>
            <div class="menu-item" @click="navigateTo('/resume' ,1)">我的简历</div>
            <div class="menu-item" @click="openMyResume">下载简历</div>
            <div class="menu-item" @click="navigateTo('/about', 1)">关于</div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useResume } from "@/stores/resume";
import { useRouter } from "vue-router";
const resumeStore=useResume();
const router = useRouter();
// 是否展示菜单
const showMenu = ref<boolean>(false);
// 折叠展示菜单
function foldMenu() {
    showMenu.value = !showMenu.value;
}
// 导航
function navigateTo(path: string, type?: number) {
    router.push(path);
    if (type === 1) {
        showMenu.value = false;
    }
}
// 下载简历
function openMyResume(){
  resumeStore.openResume();
}
</script>

<style scoped lang="scss">
.topbar {
    height: 55px;
    position: sticky;
    z-index: 10;
    top: 0;
    border-bottom: 1px solid #dcdfe6;
    background-image: radial-gradient(transparent 1px, white 1px);
    background-size: 4px 4px;
    backdrop-filter: saturate(50%) blur(4px);
    -webkit-backdrop-filter: saturate(50%) blur(4px);
    color: var(--text-color);
    background-color: rgba(255, 255, 255, 0.399);

    .inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
        max-width: 800px;
        margin: 0 auto;

        .left {
            font-size: 25px;
            font-weight: bold;
        }

        .right {
            display: flex;
            border-radius: 4px;

            .right-item {
                padding: 0 12px;
                cursor: pointer;

                &:nth-last-child(1) {
                    padding-right: 0;
                }

                &:hover {
                    text-decoration: underline;
                }
            }
        }

        .menu-icon {
            background-image: url(@/assets/topbar/menu.png);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
            height: 40px;
            width: 40px;
            cursor: pointer;
            display: none;
            position: relative;
        }
    }

    .menu-wrap {
        background-color: white;
        position: absolute;
        width: 100%;
        overflow: hidden;
        transition: .2s;
        padding: 10px;
        border-bottom: 1px solid #dcdfe6;
        user-select: none;

        .menu-item {
            font-size: 20px;
            padding: 5px 0;
            cursor: pointer;
            border-bottom: 1px dashed #dcdfe6;

            &:nth-last-child(1) {
                border-bottom: none;
            }
        }
    }
}

@media (max-width:640px) {
    .topbar .inner .right {
        display: none;
    }

    .topbar .inner .menu-icon {
        display: block;
    }
}
</style>